<template>
  <div class="main-other">
    <div class="Other">
        <div class="Other-l">
          <span class="iconfont icon-dingwei"></span>
          <span>定位失败</span>
        </div>
        <div class="Other-r">
          <span class="iconfont icon-diqiu"></span>
          <span>必游榜单</span>
        </div>
    </div>
    <div class="border"></div>
    <div class="hot">
        <router-link class="hot-t" to="/cityhot" git="div">
            <div class="hot-l">
              <span class="iconfont icon-remen"></span>
              <span style="color: #6f6f6f">本周热门榜单</span>
            </div>
            <span class="hot-r">全部榜单></span>
        </router-link>
        <ul class="hot-img">
            <li v-for="(item,index) in  hotbdan" :key="item.id">
              <img :src="item.imgUrl" alt="">
              <p>{{item.desc}}</p>
              <p><span class="money">{{item.price}}</span>起</p>
            </li>
        </ul>
    </div>
    <div class="border"></div>
    <div class="like">
      <div class="like-top">
          <span class="iconfont icon-xihuan" style="color: red"></span>
          猜你喜欢
      </div>
      <ul class="like-list">
          <router-link v-for="(item,index) in yLike"
              :key="item.id"
              :to="'/deteil/'+item.id"
              tag="li"
          >
            <img :src="item.imgUrl" alt="">
            <div class="list-box">
                <p class="zone">{{item.desc}}</p>
                <p class="review"><span>{{item.num}}</span>条评论</p>
                <div class="maney"><p><span>￥{{item.price}}</span>起</p>{{item.address}}</div>
                <p class="biao">{{item.text}}</p>
            </div>
          </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Other",
        props:{
            hotbdan:Array,
            yLike:Array
        },
      data(){
          return{
            // hotban:[
            //   {
            //     id:"001",
            //     imgUrl:"http://img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_250x250_c30b25dc.jpg",
            //     desc:"秦始皇陵博物院",
            //     price:"￥108"
            //   },
            //   {
            //     id:"002",
            //     imgUrl:"http://img1.qunarzz.com/sight/p0/1505/18/18ffcca94b1b7ca2.water.jpg_250x250_70d9c70e.jpg",
            //     desc:"长恨歌",
            //     price:"￥233"
            //   },
            //   {
            //     id:"003",
            //     imgUrl:"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_250x250_de106da6.jpg",
            //     desc:"陕西历史博物馆",
            //     price:"￥30"
            //   },{
            //     id:"004",
            //     imgUrl:"http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_250x250_96f4c5f8.jpg",
            //     desc:"华清宫",
            //     price:"￥108"
            //   },{
            //     id:"005",
            //     imgUrl:"http://img1.qunarzz.com/sight/p0/1508/c5/a017645d82ab89f271fdfb1bd6ecc2e0.water.jpg_250x250_786e3a24.jpg",
            //     desc:"秦岭野生动物园",
            //     price:"￥48"
            //   }
            // ],
            // "yLike": [
            //   { "id": "0001",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1703/3a/3a4a9641a8867671a3.img.png_200x200_9a235bb9.png",
            //     "desc": "西安城墙",
            //     "num": 7598,
            //     "price": 59.5,
            //     "address": "碑林区",
            //     "text": "触摸历史遗迹,感受历史沧桑"
            //   },
            //   { "id": "0002",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
            //     "desc": "长恨歌",
            //     "num": 20526,
            //     "price": 345.5,
            //     "address": "东城区",
            //     "text": "世界五大宫之首,穿越与您近在咫尺"
            //   },
            //   { "id": "0003",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1709/e4/e48857f2ce5e53a7a3.img.jpg_200x200_8ee069fe.jpg",
            //     "desc": "远去的恐龙",
            //     "num": 23535,
            //     "price": 45.5,
            //     "address": "东城区",
            //     "text": "一部不可思议的巨制演绎作品"
            //   },
            //   { "id": "0004",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1602/67/67feeab24cfc82bb90.water.jpg_200x200_af2a01b1.jpg",
            //     "desc": "太平洋海底世界",
            //     "num": 334545,
            //     "price": 345.5,
            //     "address": "西城区",
            //     "text": ""
            //   },
            //   { "id": "0005",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1507/36/ce3d2d6c9ab44d67ae68d940b8781829.water.jpg_200x200_0938a8f2.jpg",
            //     "desc": "北京野生动物园",
            //     "num": 3434645,
            //     "price": 66,
            //     "address": "大兴区",
            //     "text": "敢于从林之王近距离接触吗？"
            //   }
            // ],
          }
      }
    }
</script>

<style scoped lang="stylus">
    .Other
      width :100%;
      height :.48rem;
      border-top:1px solid #cacaca;
      display :flex;
      justify-content :space-between;
      line-height:.5rem;
      box-sizing :border-box;
      .Other-l{
          text-align :center;
          width 50%;
          border-right :1px solid #cacaca;
      }
      .Other-r{
          width :50%;
          text-align :center;
      }
    .border
      width :100%;
      height:.12rem;
      background :lightgray;

    .hot {
      width: 100%;
      height: 2rem;
      .hot-t {
        width: 100%;
        height: .4rem;
        display: flex;
        justify-content: space-between;
        line-height: .4rem;
      }
      .hot-l{
        margin-left: .1rem;
        font-size: .16rem;
        color: orangered;
      }
      .hot-r {
        margin-right: .1rem;
      }
      .hot-img{
          width 100%;
          overflow-x :scroll;
          white-space :nowrap;
          padding-bottom :.1rem;
        li{
          display :inline-block;
          text-align :center;
          margin:.05rem;
          font-size :.12rem;
          img{
            width :1rem;
            height :1rem;
          }
          p{
            margin-top :.05rem;
          }
          .money{
            color :orange;
          }
        }
      }
    }

    .like{
      width :100%;
      .like-top{
        height :.4rem;
        line-height :.4rem;
        width: 100%;
        margin-left :.1rem;
        font-size :.18rem;
      }
      .like-list{
        width :100%;
        li{
          width :97%;
          display :flex;
          height :1.6rem;
          margin-left :.1rem;
          border-bottom :1px solid lightgray;
          img{
            width :1rem;
            height :1rem;
            margin:.1rem .1rem .1rem 0;
          }
          .list-box{
            width :80%;
              display :flex;
              flex-direction :column;
              margin-top :.1rem;
              .zone{
                 font-size :.16rem;
                margin:.1rem 0;
              }
              .review{
                color :#6f6f6f;
                font-size :.12rem;
              }
              .maney{
                margin:.15rem 0;
                display :flex;
                justify-content :space-between;
                color :#6f6f6f;
                font-size :.14rem;
                margin-right :.2rem;
                span{
                  color :orange;
                  font-size :.16rem;
                }
              }
              .biao{
                margin-top :.3rem;
                color :indianred;
              }
          }
        }
      }
    }
</style>
